<template>
  <div class="container">
    <div class="header">
      <div class="title">整体风格设置：</div>
      <div class="h-content">
        <div v-for="(item, index) in colorStyleList" :key="index" class="color-style" :class="[getClass(item.dictValue)]" @click="chooseStyle(item)">
          <div class="color-header"></div>
          <div class="color-body">
            <i v-if="item.isDefault === 'Y'" class="el-icon-success"></i>
          </div>
        </div>
    </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="title">平台搜索热词：</div>
        <div class="list">
          <div class="item" v-for="(item, index) in hotWordList" :key="index">
            <div class="index" :class="getIndexStyle(index)">{{ index + 1 }}</div>
            <div class="text">{{ item.dictLabel }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          关键词典（需屏蔽词语）：
          <el-button type="primary" class="manage-btn" @click="$router.push({ path: '/form/systemConfig/dictionary' })">管理</el-button>
        </div>
        <div class="table-box">
          <el-table
            :data="secretWordList"
            :header-cell-style="headerCellStyle"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center">
            </el-table-column>
            <el-table-column
              prop="dictLabel"
              label="词语"
              min-width="80%"
              align="center">
            </el-table-column>
            <el-table-column
              prop="remark"
              min-width="20%"
              label="屏蔽次数">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {sysHotWordGet, sysSecretWordGet, sysStyleGet} from "@/api/form/systemConfig";
import {sysStyleUpdate} from "../../../../api/form/systemConfig";
import {changeStyle} from "@/utils";

export default  {
  async mounted() {
    await this.getSysStyle()
    await this.getHotWords()
    await this.getSecretWords()
  },
  data () {
    return {
      colorStyleList: [],
      hotWordList: [],
      secretWordList: []
    }
  },
  computed: {
    headerCellStyle () {
      return {'font-size': '16px','font-weight': 400,color: '#999999',background: '#fff'}
    }
  },
  methods: {
    getClass(dictValue) {
      if (dictValue === '0') return 'white'
      if (dictValue === '1') return 'dark'
    },
    async getSysStyle() {
      const { code, data } = await sysStyleGet()
      if (code === 200) {
        this.colorStyleList = data.rows
      }
    },
    async chooseStyle (style) {
      this.colorStyleList.map(item => item.isDefault = 'N');
      const { code, msg } = await sysStyleUpdate({
        dictCode: style.dictCode
      })
      if (code === 200) {
        this.colorStyleList.find(item => item.dictValue === style.dictValue).isDefault = 'Y';
        changeStyle(style.dictValue)
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    async getHotWords() {
      const { code, data } = await sysHotWordGet()
      if (code === 200) {
        this.hotWordList = data.rows
      }
    },
    async getSecretWords() {
      const { code, data } = await sysSecretWordGet()
      if (code === 200) {
        this.secretWordList = data.rows
      }
    },
    getIndexStyle (index) {
      switch (index) {
        case 0:
          return 'first'
        case 1:
          return 'second'
        case 2:
          return 'third'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  background-color: var(--theme_bg_color);
  display: flex;
  flex-direction: column;
  .header {
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    padding: 21px 24px;
    margin-bottom: 16px;

    display: flex;
    flex-direction: column;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #111111;
      margin-bottom: 10px;
    }
    .h-content {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .color-style {
        width: 96px;
        height: 80px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        cursor: pointer;
        .color-header {
          height: 30px;
        }
        .color-body {
          height: 62px;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
          i {
            font-size: 24px;
            color: #29A500;
            margin: 10px;
          }
        }
      }
      .white {
        .color-header {
          background: #fff;
        }
        .color-body {
          background: #F2F3F5;
        }
      }
      .dark {
        .color-header {
          background: #0B1A2D;
        }
        .color-body {
          background: #2A3748;
        }
      }
    }
  }
  .content {
    width: 100%;
    flex: 1;
    background: var(--theme_bg_color);
    display: flex;
    .title {
      height: 50px;
      font-size: 16px;
      font-weight: 400;
      color: #111111;
      display: flex;
      align-items: center;
      justify-content: space-between;
      ::v-deep .manage-btn {
        background: #2E69F8;
        border-color: #2E69F8;
      }
    }
    .left {
      width: 340px;
      background: #FFFFFF;
      padding: 17px 24px;
      border-radius: 8px 8px 8px 8px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      .list {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .item {
          display: flex;
          align-items: center;
          height: 50px;
          width: 100%;
          .index {
            height: 100%;
            display: flex;
            align-items: center;
            padding-right: 10px;

            font-size: 16px;
            font-weight: 400;
            color: #C0C0C0;
            border-bottom: 1px solid #F2F2F2;
          }
          .first {
            color: #F34A30;
            border: none;
          }
          .second {
            color: #F7643C;
            border: none;
          }
          .third {
            color: #FCB261;
            border: none;
          }
          .text {
            height: 100%;
            width: 335px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #F2F2F2;

            font-size: 16px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
    .right {
      flex: 1 1 auto;
      width: 0;
      background: #FFFFFF;
      padding: 17px 24px;
      border-radius: 8px;
      .table-box {
      }
    }
  }
}
</style>
